<template>
  <div class="login-bg">
    <el-row
      justify="center"
      align="middle"
      style="height: 100vh;"
    >
      <el-col :span="8">
        <el-card class="login-card">
          <div class="login-title">
            校园外卖后台管理系统
          </div>
          <div class="login-card-title">
            欢迎登录
          </div>
          <el-form
            :model="loginForm"
            label-width="80px"
            class="login-form"
            @submit.prevent="handleLogin"
          >
            <el-form-item label="用户名">
              <el-input
                v-model="loginForm.username"
                placeholder="请输入用户名"
              />
            </el-form-item>
            <el-form-item label="密码">
              <el-input
                v-model="loginForm.password"
                type="password"
                placeholder="请输入密码"
              />
            </el-form-item>
            <el-form-item>
              <el-button
                type="primary"
                class="login-btn"
                :loading="loading"
                @click="handleLogin"
              >
                登录
              </el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'
import { useRouter } from 'vue-router'

// 登录表单数据
const loginForm = reactive({
  username: '',
  password: ''
})
const loading = ref(false)
const router = useRouter()

// 登录处理函数
const handleLogin = (): void => {
  loading.value = true
  setTimeout(() => {
    loading.value = false
    if (loginForm.username && loginForm.password) {
      localStorage.setItem('isLogin', '1')
      router.replace('/')
    } else {
      alert('请输入用户名和密码')
    }
  }, 800)
}
</script>

<style scoped>
.login-bg {
  height: 100vh;
  background: linear-gradient(135deg, #f6f8fa 60%, #e3f0ff 100%);
  position: relative;
  overflow: hidden;
}
.login-title {
  text-align: center;
  font-size: 2.2rem;
  font-weight: bold;
  color: #222;
  margin-top: 0;
  margin-bottom: 12px;
  letter-spacing: 2px;
  white-space: nowrap;
}
.login-card {
  margin: 0 auto;
  border-radius: 14px;
  box-shadow: 0 2px 16px #e6e6e6;
  padding: 36px 32px 24px 32px;
  min-width: 420px;
  max-width: 480px;
}
.login-card-title {
  text-align: center;
  font-size: 1.4rem;
  font-weight: 600;
  margin-bottom: 24px;
  color: #409EFF;
  letter-spacing: 1px;
}
.login-form {
  margin-top: 0;
}
.login-btn {
  width: 100%;
  font-size: 1.1rem;
  letter-spacing: 2px;
}
</style> 